<template>
	<div>
		<el-dialog
			title="新增"
			:visible.sync="dialogTableVisible"
			:close-on-click-modal="false"
			:show-close="false"
			:close-on-press-escape="false"
		>
			<el-form
				ref="ruleForm"
				:model="ruleForm"
				label-width="100px"
				:rules="rules"
			>
				<el-form-item label="机构名称：" prop="orgName">
					<el-select
						v-model="ruleForm.orgName"
						filterable
						remote
						:remote-method="remoteMethod"
						placeholder="请选择"
						@input="sllectChange"
					>
						<el-option
							v-for="(item, index) in options"
							:key="index"
							:label="item.orgName"
							:value="index"
						>
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="接口类型：" prop="typeCode">
					<el-select
						v-model="ruleForm.typeCode"
						filterable
						placeholder="请选择"
						:remote-method="remoteMethod"
						@input="selectTypeChange"
					>
						<el-option
							v-for="(item, index) in typeOptions"
							:key="index"
							:label="item.display"
							:value="index"
						>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="接口名称：" prop="interfaceName">
					<el-input v-model="ruleForm.interfaceName"></el-input>
				</el-form-item>
				<el-form-item label="接口地址：" prop="interfaceUrl">
					<el-input v-model="ruleForm.interfaceUrl"></el-input>
				</el-form-item>
				<el-form-item label="接口描述：" prop="remark">
					<el-input v-model="ruleForm.remark" type="textarea"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="confirm('ruleForm')"
					>确 定
				</el-button>
				<el-button @click="cancel('ruleForm')">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { getOrgHospitalList } from '@/http/org.js'
import { insertHospInterface } from '@/http/common.js'
import { getSysDataDictList } from '@/http/dict.js'
export default {
	props: {
		dialogTableVisible: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			options: [],
			typeOptions: [],
			ruleForm: {
				orgName: '',
				typeCode: '',
				interfaceName: '',
				interfaceUrl: '',
				remark: '',
			},
			optionsId: '',
			optionsName: '',
			optionsTypeId: '',
			optionsTypeName: '',
			rules: {
				orgName: [{ required: true, message: '不能为空', trigger: 'change' }],
				typeCode: [{ required: true, message: '不能为空', trigger: 'blur' }],
				interfaceName: [
					{ required: true, message: '不能为空', trigger: 'blur' },
				],
				interfaceUrl: [
					{ required: true, message: '不能为空', trigger: 'blur' },
				],
				remark: [{ required: true, message: '不能为空', trigger: 'blur' }],
			},
		}
	},
	created() {
		this.selectList(1)
		this.selectTypeList()
	},
	methods: {
		sllectChange(index) {
			// if (index != '') {
			this.optionsId = this.options[index].id
			this.optionsName = this.options[index].orgName
			// }
		},
		selectTypeChange(index) {
			// if (index != '') {
			console.log(this.typeOptions[index])
			this.optionsTypeId = this.typeOptions[index].value
			this.optionsTypeName = this.typeOptions[index].display
			// }
		},
		remoteMethod(query) {
			this.selectList(1, query.toUpperCase())
		},
		remoteTypeMethod(query) {
			this.selectTypeList(query.toUpperCase())
		},
		selectList(officeType, orgNameOrInputCode) {
			getOrgHospitalList({
				officeType: officeType,
				orgNameOrInputCode: orgNameOrInputCode,
			}).then(({ data }) => {
				this.leftLoginng = false
				if (data.head.code == 200) {
					this.options = data.data
				}
			})
		},
		selectTypeList() {
			getSysDataDictList({ type: 'RC_INTERFACE_TYPE' }).then(({ data }) => {
				this.leftLoginng = false
				if (data.head.code == 200) {
					this.typeOptions = data.data
				}
			})
		},
		// 确定
		confirm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					let param = {
						orgId: this.optionsId,
						orgName: this.optionsName,
						typeCode: this.optionsTypeId,
						typeName: this.optionsTypeName,
						interfaceName: this.ruleForm.interfaceName,
						interfaceUrl: this.ruleForm.interfaceUrl,
						remark: this.ruleForm.remark,
					}
					console.log(param)
					insertHospInterface(param).then(({ data }) => {
						console.log(data)
						if (data.head.code == 200) {
							this.$message({
								message: '保存成功',
								type: 'success',
							})
						}
					})
					this.ruleForm = {
						orgName: '',
						typeCode: '',
						interfaceName: '',
						interfaceUrl: '',
						remark: '',
					}
					this.$nextTick(() => {
						this.$refs['ruleForm'].clearValidate()
					})
					let dialogValue = {
						verdict: false,
						typeValue: 1,
					}
					this.$emit('newlyClick', dialogValue)
				} else {
					return false
				}
			})
		},

		// 取消
		cancel() {
			let dialogValue = {
				verdict: false,
				typeValue: 0,
			}
			this.ruleForm = {
				orgName: '',
				typeCode: '',
				interfaceName: '',
				interfaceUrl: '',
				remark: '',
			}
			this.value = ''
			this.$emit('newlyClick', dialogValue)
			this.$nextTick(() => {
				this.$refs['ruleForm'].clearValidate()
			})

			console.log('取消')
		},
	},
}
</script>

<style></style>
